<template>
	<div>
		<Navigation></Navigation>
		<!-- 大图 -->
		<div class="bigimgbox">
			<img src="./img/personal/personal.jpg" alt="">
		</div>
		<!-- font图标 -->
		<div class="fontboxs">
			<div class="fontbox">
				<img src="./img/personal/ico-zcgr1.png" alt="">
				<div>租期灵活</div>
				<div class="fontboxtype2">一个月起租，随租随用</div>
			</div>
			<div class="fontbox">
				<img src="./img/personal/ico-zcgr2.png" alt="">
				<div>价格更低</div>
				<div class="fontboxtype2">比市场价低30%-50%</div>
			</div>
			<div class="fontbox">
				<img src="./img/personal/ico-zcgr3.png" alt="">
				<div>免费检测</div>
				<div class="fontboxtype2">租车前后，免费检测</div>
			</div>
			<div class="fontbox">
				<img src="./img/personal/ico-zcgr4.png" alt="">
				<div>车况无忧</div>
				<div class="fontboxtype2">蓉之风为您质量担保</div>
			</div>
		</div>
		<!-- 我们的优势 -->
		<div class="self">
		     <div class="selftitle">我们的优势</div>
			<el-steps :active="4" finish-status="success " align-center>
			  <el-step title="专业品质服务" description="成都蓉之风成立于2010年，起步早、定位早、管理严谨、服务创新意识强，现已成为在公司规模、综合实力、服务水平等方面均衡发展的汽车租赁公司。"></el-step>
			  <el-step title="10年以上司机驾龄" description="公司所有司机普遍10年以上驾龄，并经过严格筛选培训后上岗。拥有五星级酒店服务水平。"></el-step>
			  <el-step title="24小时在线服务" description="24小时在线服务，遇到任何问题第一时间反馈；秉承“客户至上，信誉第一”的服务理念，尽心尽力为客户服务。"></el-step>
			  <el-step title="车型丰富任你挑选" description="蓉之风随时更新车款，让用户可随时租用最新车型，奔驰 宝马 奥迪 帕萨特 凯美瑞等等不胜枚举。"></el-step>
			</el-steps>
		</div>
		<!-- 车表 -->
		<div class="cartype">
			<div>推荐车型</div>
			<div class="cartype2">多款车型您挑选</div>
		</div>
		<div class="carlists">
		  <div class="carlist" v-for="el in arr1">
		    <router-link :to="{path:'/yj/detail',query:{'id':el.carid}}">
		      <img :src="el.img[0]" alt="" />
		   </router-link>
		    <div class="type1">{{el.carname}}</div>
		    <div class="type2">{{el.shift}}&nbsp;|&nbsp;乘坐{{el.peopel}}人</div>
		    <div class="type3">￥<span>{{el.price}}</span>元起</div>
		  </div>
		</div>
		

		<Liucheng></Liucheng>
		<Footer1></Footer1>
	</div>
</template>

<script setup>
import {ref,
		reactive,
		onBeforeMount,
		getCurrentInstance,
 
	} from "vue"


// 后端数据

 
	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
 
	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
  
  	 onBeforeMount( async()=>{
  	 	let res=await proxy.$axios('/gerencar') //使用公共配置的$axios进行axios请求
  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 // console.log(arr1,6666)	
		 
		 //处理图片路径问题
		 let VehicleCarArry=[]
		 let aa=[]
		 let bb=[]
		arr1.forEach((el,index)=>{
				VehicleCarArry[index]=el.VehicleCar.split("---")
				aa[index]=VehicleCarArry[index].join('http://localhost:7001')
				bb[index]=aa[index].split(",")
			    el.img=bb[index]

		})
		// arr1.push
			// console.log(VehicleCarArry,1111,aa,222,bb)
			// console.log(arr1[0].img,6666)
  	 })
  

  
</script>

<style lang="scss" scoped>
     //大图
	.bigimgbox{
		width: 100%;
		  text-align: center;
		  overflow: hidden;
		  img{
			    margin: auto -100%;
			    vertical-align: middle;
		  }
	}
	//font图标
	.fontboxs{
		  width: 1000px;
		  padding: 30px;
		  margin: 0 auto;
		  text-align: center;
		  // background-color: antiquewhite;
		  display: flex;
		  justify-content: space-evenly;
		  .fontbox{
			  width: 150px;
			  img{
				  width: 75px;
				  height: 75px;
			  }
			  div{
				  cursor:default;
				  font-size: 15px
			  }
			  .fontboxtype2{
				  font-size: 12px;
				  color: #939393;
				  margin-top: 5px;
			  }
		  }
	}
	//我们的优势
	.self{
		cursor:default;
		margin: 0 auto;
		width: 80%;
		// background-color: antiquewhite;
		text-align: center;
		padding: 20px;
		.selftitle{
			margin: 0 auto;
			// width: 50px;
			height: 50px;
			font-size: 50px;
			padding-bottom: 20px;
			color:#3ac257;
		}
		
        ::v-deep .el-step__title{
			font-size: 25px;
			line-height: 60px;
		}
	}
	//车表描述
    .cartype{
		cursor:default;
		width: 1300px;
		// height: 30px;
		text-align: center;
		font-size: 40px;
		background-color: #fafafa;
		// color: #3ac257;
		margin: 0 auto;
		line-height: 45px;
		.cartype2{
			font-size: 14px;
			color: #a5a59d;
		}
	}//车表
	.carlists {
	  background-color: #fafafa;
	  cursor: default;
	  width: 1300px;
	  // height: 2000px;
	  margin: 0 auto;
	  // background-color: #3ac257;
	  flex-wrap: wrap;
	  display: flex;
	  // justify-content: space-between;
	
	  .carlist:hover {
	    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); /* 鼠标悬浮时盒子出现的阴影 */
	    transform: translate(0, -5px); /* 鼠标悬浮时盒子上移10px */
	  }
		//单个车box
		.carlist{
		width: 378px;
		// background-color: aliceblue;
		margin-bottom: 20px;
		margin-left: 40px;
		position: relative;
		border: 1px solid #d5d2d2;
		transition: all 0.3s; /* 上浮这个过程需要的时间 */
			a{  //车img
				img{
					cursor:pointer;
					width: 378px;
					height: 258px;
				}
			}//车辆型号
			.type1{
				margin-left: 10px;
				margin: 5px;
				font-size: 18px;
			}
			.type2{
				margin-left: 10px;
				font-size: 14px;
				
			}
			.type3 {
				width:130px;
			  position: absolute;
			  top: 280px;
			  left: 260px;
			  span {
			    color: #ff3e1d;
			    font-size: 24px;
			  }
			}
		}
	}
</style>